<style lang="less">
  #div_truck_load_order_detail {
    .f-w90 {
      width: 90%;
    }
    .f-w20 {
      width: 20%;
      input {
        padding: 0px;
      }
    }
    .f-w30 {
      width: 30%;
    }
    .el-input-group__append, .el-input-group__prepend {
      padding: 0px 7px;
    }
    .el-date-picker-sy {
      width: 35%;
      input {
        padding-right: 0px;
      }
    }
    .el-time-select-sy {
      width: 25%;
      input {
        padding-right: 0px;
      }
    }
    .el-row {
      margin-bottom: 0px;
    }
  }
</style>

<template>
  <div id="div_truck_load_order_detail">
    <el-form :model="truckLoadManageForm" ref="truckLoadManageForm" label-width="110px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="发货人姓名">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.startContactName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收货人姓名">
            <el-input :disabled="isDisabled" class="f-w90" v-model="truckLoadManageForm.endContactName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="发货人手机号">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.startContactPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收货人手机号">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.endContactPhone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="发货地址">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.startContactAddressNames"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收货地址">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.endContactAddressNames"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="街道">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.startContactStreet"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="街道">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.endContactStreet"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="发车时间">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.predictDepartCarDate"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="货物规格">
            <el-input :disabled="isDisabled" class="f-w20" v-model="truckLoadManageForm.cargoLength">
              <template slot="append">长</template>
            </el-input>
            <el-input :disabled="isDisabled" class="f-w20" v-model="truckLoadManageForm.cargoWide">
              <template slot="append">宽</template>
            </el-input>
            <el-input :disabled="isDisabled" class="f-w20" v-model="truckLoadManageForm.cargoHigh">
              <template slot="append">高</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="需求车辆">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.trucksTypeName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="装卸方式">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.assembleTypeName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="需求车长">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.trucksLengthName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="货物品名">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.cargoName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="货物品类">
            <el-input :disabled="true" class="f-w90" v-model="truckLoadManageForm.cargoTypeName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="特殊要求">
            <el-input :disabled="isDisabled" type="textarea" class="f-w90"
                      v-model="truckLoadManageForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="货物重量">
            <el-input :disabled="isDisabled" class="f-w30" v-model="truckLoadManageForm.weight">
              <template slot="append">吨</template>
            </el-input>
            <el-input :disabled="isDisabled" class="f-w30" v-model="truckLoadManageForm.volume">
              <template slot="append">方</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款方式">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.paymentTypeName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="发布运费" prop="specifications">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.discountPrice"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="货主议价" prop="specifications">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.bargainPrice"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商定运费" prop="specifications">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.negotiatePrice"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="整车保价" prop="specifications">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.support">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="整车定金" prop="specifications">
            <el-input :disabled="isDisabled" class="f-w90"
                      v-model="truckLoadManageForm.earnest"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'TruckLoadOrderSelectDialog',
  props: {
    truckLoadOrderDetail: {
      type: Object,
      required: true
    }
  },
  watch: {
    truckLoadOrderDetail (val) {
      let model = this.truckLoadManageForm = val;
      this.truckLoadManageForm.predictDepartCarDate = this.truckLoadManageForm.predictDepartCarDate.substring(0, 16);
      this.truckLoadManageForm.support = this.truckLoadManageForm.supportValue + '  （保费' + this.truckLoadManageForm.insurance + ')';
      this.isShow = model.isShow;
    }
  },
  data () {
    return {
      isShow: false,
      isDisabled: true,
      truckLoadManageForm: {
        startAddressIdArray: [],
        startContactName: '',
        startContactPhone: '',
        startContactAddressDictIds: '',
        startContactAddressDictNames: '',
        startContactStreet: '',
        endAddressIdArray: [],
        endContactName: '',
        endContactPhone: '',
        endContactAddressDictIds: '',
        endContactAddressDictNames: '',
        endContactStreet: '',
        predictDepartCarDate: '',
        predictDepartCarTime: '',
        trucksTypeId: '',
        trucksTypeName: '',
        trucksLengthId: '',
        trucksLengthName: '',
        cargoId: '',
        cargoName: '',
        cargoTypeId: '',
        cargoTypeName: '',
        weight: '',
        assembleType: '',
        assembleTypeName: '',
        bargainPrice: '',
        paymentType: '',
        paymentTypeName: '',
        support: '',
        remark: ''
      }
    };
  },
  methods: {},
  mounted () {
  }
};
</script>
